<template>
  <div id="Line-vue">

  </div>
</template>

<script>
export default {
  mounted() {
    this.echarts()
  },
  methods: {
    echarts() {
      let myChart = this.$echarts.init(document.getElementById('Line-vue'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['月排放量', '月减排量'],
          textStyle: {
            color: 'white',
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['100', '200', '300', '400', '500', '600', '700'],
          axisLabel: {
            textStyle: {
              color: 'white',
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'white',
            }
          }
        },
        series: [
          {
            name: '排放量',
            type: 'line',
            stack: 'Total',
            data: [800, 732, 701, 734, 790, 730, 710]
          },
          {
            name: '减排量',
            type: 'line',
            stack: 'Total',
            data: [420, 482, 491, 434, 490, 430, 410]
          }
        ]
      });
    }
  },
}
</script>

<style scoped>
#echartsID {
  width: 90%;
  height: 80%;
}
</style>
